import React from 'react';
import { useNavigate } from 'react-router-dom';
import './Navbar.css';

const Navbar: React.FC = () => {
  const navigate = useNavigate();

  const handleLoginClick = () => {
    navigate('/login');
  };

  return (
    <header className="navbar">
      <div className="navbar-content">
        <div>
          <h1 className="navbar-title">RoleForge AI</h1>
          <p className="navbar-subtitle">智能角色创造助手</p>
        </div>
        <div className="navbar-actions">
          <button className="navbar-button" onClick={handleLoginClick}>登录</button>
          <button className="navbar-button">注册</button>
        </div>
      </div>
    </header>
  );
};

export default Navbar;
